<template>
  <div class="login-page">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
    
    <!-- 主内容区 -->
    <div class="login-content">
      <!-- Logo和标题 -->
      <div class="logo-section">
        <div class="logo-icon">
          <van-icon name="clock-o" size="48" />
        </div>
        <h1 class="app-title">工作时间记录</h1>
        <p class="app-subtitle">记录出差 · 管理休息 · 统计工时</p>
      </div>
      
      <!-- 登录表单 -->
      <div class="login-form-wrapper">
        <van-form @submit="handleLogin" class="login-form">
          <van-cell-group inset class="form-group">
            <van-field
              v-model="token"
              name="token"
              placeholder="请输入口令"
              :rules="rules"
              :maxlength="20"
              clearable
              autocomplete="off"
              class="token-input"
            >
              <template #left-icon>
                <van-icon name="lock" class="field-icon" />
              </template>
            </van-field>
          </van-cell-group>
          
          <div class="form-actions">
            <van-button 
              round 
              block 
              type="primary" 
              native-type="submit"
              :loading="loading"
              loading-text="登录中..."
              class="login-btn"
            >
              登录
            </van-button>
          </div>
        </van-form>
        
        <!-- 提示信息 -->
        <div class="tips-section">
          <div class="tip-item">
            <van-icon name="info-o" />
            <span>口令只能包含数字和字母，最多20位</span>
          </div>
          <div class="tip-item">
            <van-icon name="add-o" />
            <span>新口令会自动创建账户</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部版权 -->
    <div class="footer">
      <span>© 2025 WorkHours</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast, closeToast } from 'vant'
import { useAppStore } from '../stores/index.js'

const router = useRouter()
const store = useAppStore()

const token = ref('')
const loading = ref(false)

const rules = [
  { required: true, message: '请输入口令' },
  { pattern: /^[a-zA-Z0-9]+$/, message: '口令只能包含数字和字母' }
]

const handleLogin = async () => {
  if (!token.value.trim()) {
    showToast('请输入口令')
    return
  }
  
  if (!/^[a-zA-Z0-9]+$/.test(token.value)) {
    showToast('口令只能包含数字和字母')
    return
  }
  
  loading.value = true
  
  try {
    const response = await store.login(token.value)
    
    if (response.code === 200) {
      showToast({
        message: '登录成功',
        icon: 'success',
        duration: 1500
      })
      
      // 加载用户状态
      await store.getUserStatus()
      
      // 跳转到主页
      setTimeout(() => {
        router.push('/home')
      }, 500)
    }
  } catch (error) {
    console.error('登录失败:', error)
    showToast({
      message: error.message || '登录失败',
      icon: 'fail'
    })
  } finally {
    loading.value = false
  }
}

// 检查是否已登录
onMounted(() => {
  if (store.checkLoginStatus()) {
    router.push('/home')
  }
})
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: var(--app-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}

.circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  top: -100px;
  right: -80px;
  animation: float 8s ease-in-out infinite;
}

.circle-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  bottom: 100px;
  left: -60px;
  animation: float 6s ease-in-out infinite reverse;
}

.circle-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  bottom: -50px;
  right: 30%;
  animation: float 7s ease-in-out infinite 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

/* 主内容 */
.login-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  z-index: 1;
}

/* Logo区域 */
.logo-section {
  text-align: center;
  margin-bottom: 48px;
}

.logo-icon {
  width: 88px;
  height: 88px;
  background: var(--accent-gradient);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
}

.logo-icon :deep(.van-icon) {
  color: white;
}

.app-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: 2px;
}

.app-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 1px;
}

/* 表单区域 */
.login-form-wrapper {
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}

.form-group {
  background: var(--card-bg) !important;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.token-input {
  background: transparent !important;
  padding: 16px 20px;
}

.token-input :deep(.van-field__body) {
  height: 28px;
}

.token-input :deep(.van-field__control) {
  font-size: 16px;
}

.field-icon {
  color: var(--accent-primary);
  font-size: 20px;
  margin-right: 12px;
}

.form-actions {
  margin-top: 24px;
}

.login-btn {
  height: 52px;
  font-size: 17px;
  font-weight: 600;
  background: var(--accent-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.login-btn:active {
  transform: scale(0.98);
}

/* 提示区域 */
.tips-section {
  margin-top: 32px;
  padding: 0 8px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.tip-item :deep(.van-icon) {
  font-size: 16px;
  color: var(--accent-primary);
  opacity: 0.7;
}

/* 底部 */
.footer {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 12px;
  position: relative;
  z-index: 1;
}
</style>

